<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import axios from 'axios';
const router = useRouter();
const inputname = ref('')
const inputpassword = ref('')


// const handleLogin = () => {
//     // 假设本地账号和密码都是 admin
//     if (inputname.value === 'stu' && inputpassword.value === 'stu') {
//         localStorage.setItem('loginId', inputname.value); // 保存登录id到本地
//         ElMessage.success('登录成功');
//         router.push('/stuMain');
//     } else {
//         ElMessage.error('用户名或密码错误');
//     }
// }

const handleLogin = async () => {
    try {
        const response = await axios.post('http://localhost:8080/student/login', {
            "loginId": inputname.value,  
            "password": inputpassword.value,
        });
        if (response.data.code === 200) {
            ElMessage.success('登录成功');
            localStorage.setItem('loginId', inputname.value); // 保存登录id到本地
            router.push('/stumain');
        } else {
            ElMessage.error(response.data.msg || '用户名或密码错误');
        }
    } catch (error) {
        ElMessage.error('网络错误');
    }
}
</script>

<template>
    <div class="login-container">
        <el-container calss="login-box">
            <el-header>
                <h1>Welcome to SOMS</h1>
            </el-header>
            <el-main>
                <div class="input-box">
                    <h4>账号</h4>
                    <el-input v-model="inputname" style="width: 240px" placeholder="Please input username" />
                    <h4>密码</h4>
                    <el-input v-model="inputpassword" style="width: 240px" type="password"
                        placeholder="Please input password" show-password />
                </div>
            </el-main>
            <el-footer>
                <el-button type="primary" @click="handleLogin">登录</el-button>
            </el-footer>
        </el-container>
    </div>
</template>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    /* 占满整个视口高度 */
    background-color: #5ba9e9;
    /* 蓝色背景 */
}

.login-box {
    width: 400px;
    padding: 20px;
    background-color: white;
    /* 白色背景 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 阴影效果 */
    text-align: center;
}
.input-box {
    display: flex;
    flex-direction: column;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}
</style>